<template>
  <div class="table-slot-wrapper">
    <span :class="['common-text', renderObj.className]" :title="renderObj.title">{{
      slotData.awakeDate
    }}</span>
  </div>
</template>

<script>
  export default {
    name: 'SuperviseDeadLineNameTableRender',
    props: {
      slotData: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      renderObj() {
        const { awakeDate } = this.slotData;
        var date = new Date(awakeDate);
        var now = new Date();
        if (now > date) {
          const title = $.i18n('collaboration.process.mouseover.overtop.true.title');
          return {
            title: title,
            className: 'color_red'
          };
        } else {
          const title = $.i18n('collaboration.listsent.overtime.no.title');
          return {
            title: title,
            className: ''
          };
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .table-slot-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    .common-text {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-word;
    }
  }
</style>
